<template>
  <div
    class="advancedSearch-container"
    style="display: flex; align-items: center; flex-direction: column;"
  >
    <div class="searchResult" style="width: 1100px; height: 400px; margin-top: 10px">
      <!-- 不同排序的切换通过button实现不是通过tab，参考b站 -->
      <el-card shadow="hover" class="search-result-card">
        <span style="font-size: 18px; margin-left: 12px">审核</span>
        <el-divider />

        <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-form-item label="标题">
              <el-input v-model="ruleForm.title" disabled="true"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="标签">
                <el-input v-model="ruleForm.label" disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="文章类型">
                <el-input v-model="ruleForm.articleType" disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--
          <el-form-item label="文章内容">
            <el-input type="textarea" v-model="ruleForm.context" disabled="true"></el-input>
          </el-form-item>

          -->

          <el-form-item label="文章内容">
            <div
              v-html="ruleForm.context"
              style="
          border: dashed rgb(244, 238, 238) 1px;
          width: 950px;
          height: 350px;
          overflow: auto;
          font-weight: bold;
          background-color: rgb(252, 251, 251);"
            ></div>
          </el-form-item>

          <el-form-item label="敏感词">
            <div
              v-html="ruleForm.keyword"
              style="
          border: dashed rgb(197, 193, 193) 1px;
          width: 950px;
          height: 50px;
          overflow: auto;
          color: red;
          font-weight: bold;
          background-color: rgb(252, 251, 251);
          "
            ></div>
          </el-form-item>

          <el-form-item label="驳回原因">
            <el-input type="textarea" v-model="overText" :autosize="{minRows:3,maxRows:5}"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="pass(KonwId)">审核通过</el-button>
            <el-button @click="overrule(KonwId)">驳回文章</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { AuditKnowledge, AuditPass, overrule } from "../../apis/apis";
import { number } from "echarts/core";
import { wordDetectionApi } from "../../apis/wordDetectionApi";
import { Message } from "element-ui";

@Component({
  name: "ExactAudit"
})
export default class ExactAudit extends Vue {
  //表单
  ruleForm = {
    title: "",
    label: [], //标签
    articleType: "",
    context: "",
    keyword: ""
  };

  //userId: number = 19;
  overText: string = "";

  timer: any;
  count: any;
  show: any;

  //审核通过
  pass(knowid: number) {
    console.log(knowid);
    if (this.overText !== "") {
      Message.warning("审核通过不应有驳回意见");
    } else {
      console.log(this.$store.state.userId);
      
      AuditPass(knowid, this.$store.state.userId)
        .then((res: any) => {
          if (res.data.code === "200") {
            this.threeGo();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }

  //打开审核页面
  handleEnterAudit(): void {
    // 创建路由对象
    const route = this.$router.resolve({
      // 跳转到写审核列表页面
      path: "/audit",
      // TODO:传递参数,应该是文章的id或是什么，这里只是测试
      query: {}
    });
    // 打开新页面
    window.open(route.href, "_blank");
  }

  //驳回审核文章
  overrule(knowid: number) {
    overrule(knowid, this.$store.state.userId, this.overText)
      .then((res: any) => {
        if (res.data.code === "200") {
          this.twoGO();
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

  //审核文章通过定时器
  threeGo() {
    this.$message({
      message: "审核通过!,3秒后将会跳转至审核列表",
      type: "success"
    });
    const TIME_COUNT = 3;
    if (!this.timer) {
      this.count = TIME_COUNT;
      this.show = false;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          //跳转的页面写在此处
          this.$router.push({
            path: "audit"
          });
        }
      }, 1000);
    }
  }
  //驳回文章定时器
  twoGO() {
    this.$message({
      message: "驳回文章成功!,2秒后将会跳转至审核列表",
      type: "success"
    });
    const TIME_COUNT = 2;
    if (!this.timer) {
      this.count = TIME_COUNT;
      this.show = false;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          //跳转的页面写在此处
          this.$router.push({
            path: "audit"
          });
        }
      }, 1000);
    }
  }
  mounted() {
    this.onUrlChange();
  }
  //初始接收数据
  KonwId: number = 0;
  // 从路由中获取查询参数，当前页面的route变化
  onUrlChange() {
    this.KonwId = this.$route.query.KonwId as any;
    AuditKnowledge(this.KonwId)
      .then((res: any) => {
        this.ruleForm.title = res.data.data.title; //标题
        this.ruleForm.articleType = res.data.data.kind; //
        if (this.ruleForm.articleType === "0") {
          this.ruleForm.articleType = "原创"; //文章类型
        } else if (this.ruleForm.articleType === "1") {
          this.ruleForm.articleType = "转载"; //文章类型
        } else if (this.ruleForm.articleType === "2") {
          this.ruleForm.articleType = "翻译"; //文章类型
        }
        this.ruleForm.context = res.data.data.content; //内容
        
        this.ruleForm.label = res.data.data.tag;
        wordDetectionApi(this.ruleForm.context, 1)
          .then((res: any) => {
            let words = res.data.data.words;
            let wordsStr = words.join("、");
            this.ruleForm.keyword = wordsStr;
            if (wordsStr.length === 0) {
              this.ruleForm.keyword = "暂无敏感词";
            }
          })
          .catch(err => {
            console.log(err);
          });
      })
      .catch(err => {
        console.log(err);
      });
  }
}
</script>